<template>
  <div class="pt-3 px-4">
    <section class="add text-center primary--text rounded-md-l" @click="toAddEditUser('add')">+ 新建就诊人</section>
    <section>
      <div
        v-for="item in patients"
        :key="item.key"
        class="family_item mt-3 rounded-md-l pa-3"
        @click="onChoose(item.patientId)"
      >
        <p class="font-weight-bold d-inline-block" @click.stop="toAddEditUser('edit', item.patientId)">
          <span class="text-ellipsis font-weight-bold family_item-name d-inline-block">{{ item.patientName }}</span> ·
          {{ item.patientGender | formatGender }}
          <i class="icon-edit font-size-lg"></i>
        </p>
        <p class="family_item__relationship rounded-md primary--text line-height-xs font-size-sm my-1 primary-lighter">
          <i class="icon-relationships font-size-lg"></i>
          {{ item.patientRelation | formatPatientRelation }}
        </p>
        <p class="text--secondary">
          <span>婚姻：</span>
          <span>{{ item.patientMarital | formatMarriage }}</span>
        </p>
        <p class="text--secondary my-1">
          <span>电话：</span>
          <span>{{ item.patientMobile }}</span>
        </p>
        <p class="text--secondary">
          <span>证件：</span>
          <span>{{ item.patientCardType | formatPatientCardType }} - </span>
          <span>{{ item.patientCardNo }}</span>
        </p>
        <p class="family_item-default primary--text" @click.stop="setDefaultPatient(item.patientId)">
          <i :class="item.isChoice ? 'icon-radio-checked' : 'icon-circle'"></i>
          <span>{{ item.isChoice ? '已设为默认' : '设置为默认' }}</span>
        </p>
      </div>
    </section>
  </div>
</template>
<script>
/**
 * 就诊人列表页
 */
export default {
  name: 'UserManager',
  head() {
    return {
      title: this.$tv('user.title', '就诊人管理'),
    };
  },
  async asyncData({ $lvtongApis, store }) {
    const patients = await $lvtongApis.getPatientList().then(({ data }) => data);
    return {
      patients,
    };
  },
  data() {
    return {
      patients: [],
    };
  },
  methods: {
    async toAddEditUser(operateType, patientId) {
      // NOTE: 临时方案，替换成组件共用，而不是页面共用
      if (patientId) {
        // FIXME: 设置成默认用户才可以执行后面的程序，设计不合理
        await this.$$lvtongApis.chosePatient(patientId)({ loading: true });
      }
      this.goTo({ name: 'add-edit-user', query: { ...this.$route.query, operateType } }, true);
    },
    onChoose(patientId) {
      this.$route.query.code && this.toAddEditUser('chose', patientId);
    },
    async setDefaultPatient(patientId) {
      await this.$$lvtongApis.chosePatient(patientId)({ loading: true });
      this.patients = this.patients.map((item) => {
        return {
          ...item,
          isChoice: item.patientId === patientId,
        };
      });
    },
  },
};
</script>
<style scoped lang="less">
.add {
  line-height: 48px;
  box-shadow: 0px 1px 10px 0px rgba(198, 202, 211, 0.4);
}
.family_item {
  position: relative;
  box-shadow: 0px 1px 10px 0px rgba(198, 202, 211, 0.4);
  &__relationship {
    width: 50px;
    height: 16px;
  }
  &-default {
    position: absolute;
    right: 14px;
    top: 14px;
  }
  &-name {
    vertical-align: bottom;
    max-width: 150px;
  }
}
</style>
